<!--录取率测试组件-->
<template>
	<div id="enroll" class="enroll">
		<div class="select">
			<h1 class="test-enroll">测院校录取概率</h1>
			<div class="tip">分析了过去5年的考生录取情况后，根据科学的位次分析法得到，保证预测结果更加可靠。</div>
			<div class="info">
				<span class="user-info">考生信息</span>
				<span class="user-area"><span>生源地：</span><span>{{mybase.city}}</span></span>
				<span class="user-subject"><span>科类：</span><span>{{mybase.kelei}}</span></span>
				<span class="user-score"><span>分数：</span><span>{{mybase.score}}</span></span>
				<span @click="toIndex" class="revise">修改</span>
			</div>
			<div class="info item-school">
				<span class="user-info">目标院校</span>
				<input @input="inputChange" type="text" placeholder="在此输入目标大学" v-model=search_school>
				<span @click="startSearch" class="revise search-school">开始查询</span>
			</div>
		</div>
		<div class="search-info">
			<h2>预测概率结果</h2>
			<div class="result">
				<div class="circle">
					<canvas id="result" width="246" height="246"></canvas>
				</div>
				<div class="square">
					<div><span><span>663</span>分</span><br><span>你的分数</span></div><br><br><br><br>
					<div><span><span>653</span>分</span><br><span>2016年一本录取最低分</span></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	'use strict';

var cache = {};
//提取session
function getSession(key) {
	if (sessionStorage.getItem(key)) {
		return JSON.parse(sessionStorage.getItem(key));
	}
}
function searchSchoolAjax(el, fn) {
	var name = el.value;
	if (name == '') {
		return removeList('.info-major-list', 0.1);
	};
	base.request(base.api(65), { name: name }, function (d) {
		fn(d.data);
	});
}
//搜索列表
function searchSchoolList(d) {
	var tpl = '';
	for (var key in d) {
		tpl += '<div @click="forList" school-id="' + d[key].id + '">' + d[key].school_name + '</div>';
	}
	$('.info-major-list').remove();
	$('.select').eq(2).append('<div style="cursor:pointer;" class="info-major-list">' + tpl + '</div>');
	addEventList();
	removeList('.info-major-list', 10000);
}
function removeList(el, time) {
	setTimeout(function () {
		$(el).remove();
	}, time);
}
//给list添加时间
function addEventList() {
	$(function () {
		$('body').off('click').on('click', '.info-major-list div', function () {
			var a = $(this).attr('school-id');
			cache.input1 = $(this).html();
			$('.info.item-school').find('input').val($(this).html());
			$('.info.item-school').find('input').attr('school-id', a);
			removeList('.info-major-list', 1);
		});
	});
}
// 成绩分析报告配图
function scoreCanvas(sel, percent) {
	var c = document.getElementById(sel);
	var ctx = c.getContext("2d");
	ctx.beginPath();
	ctx.arc(123, 123, 86, 0, 2 * Math.PI); // 画圆，边框#eee，背景#fff
	ctx.strokeStyle = '#eee';
	ctx.fillStyle = '#fff';
	ctx.lineWidth = '15';
	ctx.fill();
	ctx.stroke();
	ctx.closePath();
	ctx.beginPath();
	ctx.arc(123, 123, 86, -.5 * Math.PI, (2 * (percent / 100) - .5) * Math.PI); // 根据percent/100的值画圆，边框#fe6a23
	ctx.strokeStyle = '#fe6a23';
	ctx.font = '50px Arial';
	ctx.textAlign = 'center';
	ctx.textBaseline = "middle";
	ctx.fillStyle = '#fe6a23';
	ctx.fillText(percent + '%', 123, 123);
	ctx.lineCap = 'round';
	ctx.stroke();
	ctx.closePath();
	ctx.beginPath();
	ctx.font = '24px Arial';
	ctx.textBaseline = "bottom";
	ctx.fillText('可冲刺', 123, 178);
	ctx.stroke();
	ctx.closePath();
}
module['recommond-test'] = {
	props: ['search_school'],
	data: function data() {
		return {
			mybase: getSession('mybase') || {}
		};
	},
	template: template,
	methods: {
		inputChange: function inputChange(e) {
			$('.search-info').hide();
			searchSchoolAjax(e.target, searchSchoolList);
		},
		startSearch: function startSearch(e) {
			var that = this;
			var id = $(e.target).prev().attr('school-id');
			base.request(base.api(2), { school_id: id, pici: 1 }, function (d) {
				if (!d.data.rate) {
					jcy.useJs('jcyer', function () {
						jcy.jcyer({
							skin: 1,
							content: '没有匹配的项'
						});
					});
				} else {
					$('.search-info').show();
					scoreCanvas('result', d.data.rate);
				}
			});
		},
		toIndex: function toIndex() {
			location.href = "../index.html";
		}
	},
	mounted: function mounted() {
		scoreCanvas('result', 20);
	}
};
</script>
